<template>
  <div class="conent">
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  {{ ruleForm }}
    <el-form-item label="开机时间" prop="time">
      <el-time-picker
                v-model="ruleForm.time"
                style="width: auto;"
                @change="changeTime"
                start="00:00"
                step="00:01"
                end="23:59"
                 format="HH:mm"
              />
              <!-- <el-time-picker
              v-model="ruleForm.time"
              @change="changeTime"
              is-range
              range-separator="To"
              start-placeholder="开机时间"
              end-placeholder="停机时间"
            /> -->
    </el-form-item>
    <el-form-item label="值班人员" prop="user_ids">
      <el-select
                v-model="ruleForm.user_ids"
                multiple
                placeholder="请选择值班人员"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userDatas"
                  v-show="item.type === 1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
    </el-form-item>
    <el-form-item label="停机原因">
      <el-select
                v-model="ruleForm.reason_ids"
                multiple
                placeholder="请选择停机原因"
                style="width: 100%"
              >
                <el-option
                  v-for="item in onoffDatas"
                  v-show="item.type === 2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
                </el-select>
    </el-form-item>
    <el-form-item label="说明">
      <el-input v-model="ruleForm.content" style="width: 240px" type="textarea" placeholder="Please input" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitOnoff">
        提交
      </el-button>
      <el-button @click="resetOnoff">重置</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref,defineExpose,defineProps,defineEmits   } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const props = defineProps({
  modelValue: Object
});
// 定义触发的事件
const emits = defineEmits(['update:modelValue']);

// 创建一个本地的 ref 来存储输入的值
const localValue = ref(props.modelValue);

// 当输入框的值发生变化时，触发 update:modelValue 事件
const userList =  localStorage.getItem('userList')
  const userDatas = ref(userList?JSON.parse(userList):[])

  const reasonList =  localStorage.getItem('reasonList')
  const onoffDatas = ref(reasonList?JSON.parse(reasonList):[])

console.log(localValue.value,'=')
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive(  {
  id:null,
  site_id:null,
  site_name:null,
  created_at:null,
  updated_at:null,
  record_id:null,
  record_day_id:null,
  time:[],
  start_time:null,
  end_time:null,
  hour:0,
  reason_ids:[],
  reason_name:'',
  reason:'',
  user_id:null,
  user_name:'',
  user_ids:[]

}) 
console.log(ruleForm,'=')
const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<ruleForm>>({
  time: [
    {
      required: true,
      message: '请选择时间',
      trigger: 'blur',
    }, 
  ],
 
  user_id: [
    {
      required: true,
      message: '请选择操作人',
      trigger: 'blur',
    },
  ], 
  user_ids: [
    {
      required: true,
      message: '请选择值班人员',
      trigger: 'blur',
    }, 
  ]
})

const changeTime = (value:Date) => {
  console.log(value); 
}

const submitOnoff = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      emits('update:modelValue', ruleForm);
      console.log('可以提交!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetOnoff = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  console.log('子组件重置了');
}



const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
const getInfo = () => {
  console.log('子组件的方法被调用了'); 
}
defineExpose({
  submitOnoff,
  resetOnoff,
  getInfo
})
</script>

<style scoped>

</style>
